<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>物件报修</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../Plugins/layui/css/layui.css" media="all">
	<style>
		body {
			min-height: 100vh;
			background: url(
https://lemon-pi.oss-cn-beijing.aliyuncs.com/img/equRepairBG.jpg) no-repeat center center;
			background-size: cover;
		}

		.goIndex {
			position: fixed;
			top: 48px;
			left: 30px;
			width: 60px;
			height: 30px;
			line-height: 30px;
			color: forestgreen;
			padding: 0 10px;
			border-radius: 6px;
			background-color: #FFF;
			opacity: 0.5;
			cursor: pointer;
		}

		.goIndex:hover {
			opacity: 0.7;
		}

		.container {
			width: 800px;
			padding: 15px;
			text-align: center;
			position: absolute;
			margin: 0 auto;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		.container .propMoneyBg {
			width: 100%;
			height: 100%;
			background-color: #CCC;
			opacity: 0.7;
			z-index: -1;
			position: absolute;
			top: 0;
			left: 0;
		}

		.container .redStar {
			font-size: 20px;
			color: #EA2000;
		}

		.container h2 {
			font-size: 30px;
			line-height: 30px;
			margin-top: 35px;
			margin-bottom: 45px;
			letter-spacing: 5px;
		}

		.container input:hover,
		.container textarea:hover {
			border: 1px solid #00cc77 !important;
		}

		.container button {
			margin: 10px 25px;
		}
	</style>
</head>

<body>
	<div id="container" class="container">
		<div class="goIndex" onclick="window.open('../../index.html','_self')">返回首页</div>
		<div class="propMoneyBg"></div>
		<h2>物件报修</h2>
		<form class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label"><span class="redStar">*</span>住宅地址</label>
				<div class="layui-input-block">
					<input type="text" maxlength="30" readonly="readonly" autocomplete="on" placeholder="请填写几楼几单元几室"
						class="layui-input" v-model="ownerAddress">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span class="redStar">*</span>报修类型</label>
				<div class="layui-input-block">
					<select id="mySelect">
						<option value="消防维修">消防维修</option>
						<option value="电梯维修">电梯维修</option>
						<option value="水管维修">水管维修</option>
						<option value="电路维修">电路维修</option>
						<option value="家具维修">家具维修</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span class="redStar">*</span>上门时间</label>
				<div class="layui-input-block">
					<input type="text" maxlength="20" placeholder="7.00-17.00" class="layui-input" v-model="repairDate">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">维修费用</label>
				<div class="layui-input-block">
					<input type="number" maxlength="10" placeholder="请填写维修费用" class="layui-input" v-model="repairMoney">
				</div>
			</div>
			<div class="layui-form-item">
				<button class="layui-btn" type="button" lay-filter="demo2" @click="userAddRep">保存</button>
				<button class="layui-btn" type="reset" lay-filter="demo2">重置</button>
			</div>
		</form>
	</div>
	<script src="../../Plugins/jquery-2.1.0.js"></script>
	<script src="../../Plugins/layui/layui.js"></script>
	<script src="../../Plugins/vue.js"></script>
	<script src="../../js/common.js"></script>
	<script>
		var vm = new Vue({
			el: "#container",
			data: {
				loginData: '',
				ownerID: '',
				repid: '',
				ownerName: '',
				ownerAddress: '',
				repairType: '',
				repairMoney: '',
				repairDate: ''
			},
			mounted: function () {
				this.$nextTick(function () {
					var searchParams = new URLSearchParams(window.location.search);
					vm.ownerAddress = searchParams.get('id');
					layui.use(['layer', 'form'], function () {
						var form = layui.form,
							layer = layui.layer
					});
					setTimeout(function () {
						vm.getLoginData();
						vm.isLogin();
					});
				})
			},
			methods: {
				//获取本地登录信息
				getLoginData: function () {
					if (localStorage.loginUrseData) {
						vm.loginData = JSON.parse(localStorage.getItem('loginUrseData'));
					}
				},
				//判断是否登录
				isLogin: function () {
					if (vm.loginData == '') {
						window.open('../login.html', '_self');
					}
				},
				//添加报修
				userAddRep: function () {
					var url = "/AddRepairData?word=";
					const select = document.getElementById("mySelect");
					vm.repairType = select.value;
					console.log(vm.repairType);
					var obj = {
						"addr": vm.ownerAddress, //业主住址
						"thing": vm.repairType, //报修类型
						"fee": vm.repairMoney, //维修费用
						"cdate": vm.repairDate //上门时间
					}
					console.log(obj);
					if (!vm.repairMoney) {
						layer.msg('请填写费用！');
						return
					}
					else if (!vm.repairType) {
						layer.msg('请填写报修类型！');
						return
					}
					console.log(obj);

					$.ajax({
						type: "POST",
						url: url,
						data: obj,
						success: function (res) {
							if (res.status == 'SUCCESS') {
								layer.msg('操作成功！');
								setTimeout(function () {
									window.open('equRepairList.html', '_self');
								}, 1200);
							} else {
								layer.msg('操作失败！');
							}
						},
						error: function () {
							layer.msg('服务器异常！');
						}
					});
				}
			}
		});
	</script>

</body>

</html>